import React,{useState } from 'react'
import {Input,Button,message,Space}from 'antd'
import axios from 'axios'
import {useNavigate,redirect} from 'react-router-dom'
export default function Reg() {

  // 声明状态值
  const navigate = useNavigate()
    const [un ,setun]= useState("")
    const [pw ,setpw]= useState("")
    const [us ,setus]= useState("")
    const [cl ,setcl]= useState("")
    const [re ,setre]= useState("")
    // 获取输入框中的值
    const a=(e:any)=>{
  setun(e.target.value)

    }
    const b= (e:any)=>{
      setpw(e.target.value)
   
    }
    const c=(e:any)=>{
      setus(e.target.value)
 
        }
        const d=(e:any)=>{
          setre(e.target.value)
     
            }
            const e=(e:any)=>{
              setcl(e.target.value)
            
                }
// 注册提交逻辑处理方案
  const regis = ()=>{ 
    axios.post("http://node.dayuan0307.top:300/reg",{
        name:un,
        password:pw,
        username: us,
        remote :re,
        cloud :cl,


      }).then(res=>{
        console.log(res.data)
        if(res.data==="数据添加成功"){
          message.info("用户注册成功")
          navigate("/")

        }

      }).catch(err=>{
      window.alert("用户注册失败")
        location.reload()
        redirect('/reg')
      })
    }

  const login =()=>{
    axios.post("")
   navigate('/')
  }
  return (
    <div>
      <h1>pi节点业主注册账号</h1>
    
    用户名 <Input  style={{ width: 304 }}  value={un} onChange={a}></Input><br></br>
     密码<Input.Password  style={{ width: 304 }}  value={pw} onChange={b}></Input.Password><br></br>
     真实姓名<Input style={{ width: 304 }}   value={us} onChange={c}></Input><br></br>
     云服务器ip地址<Input  style={{ width: 304 }}  value={cl} onChange={e}></Input><br></br>
     远程码<Input style={{ width: 304 }}  value={re} onChange={d}></Input><br></br>
    <Space>
     <Button type="primary" onClick={regis}>注册</Button><br></br>
     <Button type="primary" onClick={login}>登录</Button>
     </Space>
     </div>
  )
}
